<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
        }
        div {
            padding: 50px;
        }
        .canvas-container {
            border: 1px solid red;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>

        $(() => {
            console.log($('.canvas-container')[0].getContext("2d"))
            const ctx =  document.querySelector('.canvas-container').getContext("2d")
            // const ctx = $('.canvas-container')[0].getContext("2d")
            console.log(ctx)
            ctx.translate(300, 300)
            ctx.arc(0, 0, 100, 0, 2 * Math.PI)
            ctx.moveTo(60,-80)
            ctx.lineTo(-60,80)
            ctx.moveTo(-60,-80)
            ctx.lineTo(60,80)
            ctx.moveTo(-100,0)
            ctx.lineTo(100,0)
            ctx.moveTo(0,-100)
            ctx.lineTo(0,100)
            ctx.moveTo(60,-80)
            ctx.lineTo(60,80)
            ctx.lineTo(-60,80)
            ctx.lineTo(-60,-80)
            ctx.lineTo(-60,-80)
            ctx.closePath()
            ctx.fillStyle = 'cyan'
            ctx.fill()
// 画圆线使用arc(中心点X,中心点Y,半径,起始角度,结束角度)
//             ctx.arc(0, 0, 5, 0, 2 * Math.PI)
// // 执行画线段的操作stroke
            ctx.stroke()
        })
    </script>
</head>
<body>
<div>
    <canvas class="canvas-container" width="600" height="600" ></canvas>
</div>
</body>

</html>
